<!-- 从业者端-我的-个人介绍-->
<template>
	<view class="container">

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 个人简介/优势 -->
				<view class="introduction">
					<view class="header">
						<text class="title">个人简介/优势</text>
					</view>
					<view class="textarea-container">
						<u-input v-model="introduction" type="textarea" placeholder="请输入个人简介/优势" height="1000" maxlength="1000"
							@input="handleInput" :clearable="clearable" />
						<view class="word-count">
							{{ currentCount }}/1000
						</view>
					</view>
				</view>
			</u-form>

			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="primary" @click="handleSubmit" shape="circle" :loading="loading">
					保存
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				clearable: false,
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx'
				},

				form: {
					companyName: '',
					businessType: '',
					businessStatus: '营业中',
					businessAddress: '',
					detailAddress: ''
				},
				// 企业介绍输入框
				introduction: '',
				currentCount: 0,
				maxCount: 1000,
				// 验证
				rules: {
					companyName: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}]
				}
			}
		},
		onLoad(){
			this.$u.api.queryjlsimple({
				usercode : uni.getStorageSync('usercode')
			}).then (res =>{
				this.introduction = res.data.base_info.personal.jlbi_personview
				
			})
		},
		methods: {
			// 计算个人介绍内字数
			handleInput() {
				// 计算当前字数（考虑中文和符号）
				this.currentCount = this.introduction.length

				// 如果超过最大字数，截取前1000个字符
				if (this.currentCount > this.maxCount) {
					this.introduction = this.introduction.substring(0, this.maxCount)
					this.currentCount = this.maxCount
				}
			},		

			// 保存
			handleSubmit() {
				this.$u.api.createjlpersonal({
					"usercode": uni.getStorageSync('usercode'),
					"jlbipersonview": this.introduction,
				}).then(res => {
					uni.navigateTo({
						url: '/pages/Practitioner/personMesume/personMesume'
					});					
				})
				
				
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;
				// 	this.loading = true;

				// 	// 模拟API调用
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 		uni.showToast({
				// 			title: '提交成功',
				// 			icon: 'success',
				// 			complete: () => {
				// 				uni.navigateTo({
				// 					url: '/pages/register/register-finish'
				// 				});
				// 			}
				// 		});
				// 	}, 1500);
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;
	

		.introduction {
			padding: 10px 0rpx;
			background-color: #fff;

			.header {
				margin-bottom: 10rpx;
				display: flex;



				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.textarea-container {
				position: relative;

				/deep/ .u-input__textarea {
					padding: 20rpx;
					background-color: #f5f5f5;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				.word-count {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					font-size: 24rpx;
					color: #999;
					background-color: rgba(245, 245, 245, 0.7);
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
		}


		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			/deep/ .u-field {
				padding: 10px 0;
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 4rpx;
				}
			}
		
			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>